<template>
  <div class="me-container">
    <div class="user-info-wrapper">
      <div class="user-portrait">
        <img :src="user.headUrl" alt>
      </div>
      <div class="user-info">
        <div class="name">{{ user.username }}</div>
        <div class="level">
          <span class="dot"></span>
          <span>{{ user.level }}</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <div class="info-action">
        <div class="checkin-button elevation-2">Ckeck in</div>
      </div>
    </div>

    <div class="user-actions-wrapper">
      <router-link tag="div" to="/Sub/Income" class="user-action elevation-1">
        <div class="icon">
          <i class="fa fa-credit-card"></i>
        </div>
        <div class="name">Wallet</div>
        <div class="chevron">
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <router-link tag="div" to="/Sub/Invite" class="user-action elevation-1">
        <div class="icon">
          <i class="fa fa-qrcode"></i>
        </div>
        <div class="name">My QR Code</div>
        <div class="chevron">
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <router-link tag="div" to="/App/Me" class="user-action elevation-1">
        <div class="icon">
          <i class="fa fa-gear"></i>
        </div>
        <div class="name">Settings</div>
        <div class="chevron">
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <router-link tag="div" to="/App/Me" class="user-action elevation-1">
        <div class="icon">
          <i class="fa fa-headphones"></i>
        </div>
        <div class="name">Contact Customer Service</div>
        <div class="chevron">
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';

@Component
export default class Me extends Vue {
  private user: any = {
    username: "",
    level: "expert",
    headUrl:
      "http://img0.imgtn.bdimg.com/it/u=311307345,3690847989&fm=11&gp=0.jpg"
  };

  protected mounted() {
      this.user.username = Cookie.get('username');
  }
}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);
.me-container {
  width: 100%;
  height: 100%;
  .user-info-wrapper {
    display: flex;
    height: 8rem;
    background-color: @primary;
    align-items: center;
    padding: 0 1rem;
    .user-portrait {
      flex-basis: 16%;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        border: 1px solid #a7a7a7;
      }
    }
    .user-info {
      flex-basis: 70%;
      .name {
        width: 6rem;
        text-align: left;
        padding: 3px;
        color: white;
      }
      .level {
        text-align: left;
        background-color: #585858;
        color: white;
        height: 1.3rem;
        line-height: 1.3rem;
        border-radius: 0.8rem;
        width: 5rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 2px 6px;
        .dot {
          display: inline-block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #2196f3;
        }
      }
    }
    .info-action {
      flex-basis: 15%;
      display: flex;
      align-items: center;
      .checkin-button {
        width: 5rem;
        height: 1rem;
        border-radius: 0.7rem;
        background-color: #ffc107;
        color: white;
        padding: 4px 3px;
      }
    }
  }

  .user-actions-wrapper {
    .user-action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3.6rem;
      .icon {
        flex-basis: 12%;
      }
      .name {
        flex-basis: 80%;
        text-align: left;
      }
      .chevron {
        flex-basis: 8%;
      }
    }
  }
}
</style>

